<!--订单列表页-->
<template>
  <el-container>
    <el-header height="8vh" style="padding: 10px 20px;background-color: #fff;overflow:hidden;">
      <span style="line-height: 60px;font-size: 20px;">订单列表</span>
      <el-form :inline="true" style="float: right;margin-top: 10px;">
        <el-form-item label="店家选择" style="width: 220px;">
          <el-select v-model="orderQuery.shopId"
                     placeholder="请选择店家" @change="loadOrder">
            <el-option v-for="shop in merchant.shopList"
                       :label="shop.shopName" :value="shop.id"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-header>

    <el-main style="padding: 0;">
      <el-card style="height: 70px;margin: 20px;">
        <el-form :inline="true">
          <el-form-item label="订单编号" style="width: 220px;">
            <el-input v-model="orderQuery.orderNo" placeholder="请输入订单编号"
                      @keydown.enter="loadOrder"/>
          </el-form-item>
          <el-form-item label="房间id" style="width: 220px;">
            <el-input v-model="orderQuery.roomId" placeholder="请输入房间id"
                      type="number" @keydown.enter="loadOrder"/>
          </el-form-item>
          <el-form-item label="陪玩id" style="width: 220px;">
            <el-input v-model="orderQuery.escortId" placeholder="请输入陪玩id"
                      type="number" @keydown.enter="loadOrder"/>
          </el-form-item>
          <el-form-item label="订单时间" style="width: 220px;">
            <el-date-picker v-model="orderQuery.timeRange" end-placeholder="结束"
                            range-separator="-" start-placeholder="开始"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary" @click="loadOrder">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card style="margin: 20px;">
        <el-radio-group v-model="orderQuery.orderStatusList"
                        style="margin-bottom: 15px;" @change="loadOrder">
          <el-radio-button v-for="item in statusPageItem" :label="item.label"
                           :value="item.value" size="large"/>
        </el-radio-group>
        <el-table
            :data="orderList"
            style="width: 100%">
          <el-table-column align="center" label="编号" type="index" width="80"/>
          <el-table-column align="center" label="玩家名称" prop="username"/>
          <el-table-column align="center" label="房间名称" prop="roomName"/>
          <el-table-column align="center" label="陪玩" prop="escortNameString"/>
          <el-table-column align="center" label="总金额" prop="price"/>
          <el-table-column :formatter="statusFormatter" align="center"
                           label="订单状态" prop="orderStatus"/>
          <el-table-column align="center" label="预约日期" prop="appointmentDate"/>
          <el-table-column :formatter="timeRangeFormatter" align="center"
                           label="预约时间"/>
          <el-table-column align="center" label="桌游内容" prop="game"/>
          <el-table-column align="center" label="额外说明" prop="message" width="250"/>
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <el-button v-if="['20','80'].includes(scope.row.orderStatus)"
                         link type="primary"
                         @click="handleOrder(scope.row)">处理
              </el-button>
              <el-button v-else-if="scope.row.orderStatus==='50'"
                         link type="primary"
                         @click="handleOrder(scope.row)">确认到场
              </el-button>
              <el-button v-else
                         link type="primary"
                         @click="handleOrder(scope.row)">详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>
  </el-container>

  <el-dialog
      v-model="dialogVisible"
      :before-close="closeDialog"
      style="padding: 40px;"
      title="订单详情"
      width="1000px">
    <el-descriptions :column="2" border direction="horizontal">
      <el-descriptions-item label="订单id">
        {{ orderDetail.id }}
      </el-descriptions-item>
      <el-descriptions-item label="订单编号">
        {{ orderDetail.orderNo || null }}
      </el-descriptions-item>
      <el-descriptions-item label="玩家名称">
        {{ orderDetail.username }}
      </el-descriptions-item>
      <el-descriptions-item label="房间名称">
        {{ orderDetail.roomName }}
      </el-descriptions-item>
      <el-descriptions-item label="陪玩">
        {{ orderDetail.escortNameString }}
      </el-descriptions-item>
      <el-descriptions-item label="总金额">
        {{ orderDetail.price }}
      </el-descriptions-item>
      <el-descriptions-item label="预约日期">
        {{ orderDetail.appointmentDate }}
      </el-descriptions-item>
      <el-descriptions-item label="预约时间">
        {{ orderDetail.startTime }} - {{ orderDetail.endTime }}
      </el-descriptions-item>
      <el-descriptions-item label="订单状态">
        {{ getOrderStatus }}
      </el-descriptions-item>
      <el-descriptions-item label="桌游内容">
        {{ orderDetail.game || null }}
      </el-descriptions-item>
      <el-descriptions-item label="额外说明">
        {{ orderDetail.message || null }}
      </el-descriptions-item>
      <el-descriptions-item label="店家说明">
        {{ orderDetail.shopMessage || null }}
      </el-descriptions-item>
      <el-descriptions-item label="付款时间">
        {{ orderDetail.payTime || null }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="closeDialog">退出</el-button>
      <el-button v-if="orderDetail.orderStatus==='20'"
                 type="danger" @click="showMessageDialog(true)">取消订单
      </el-button>
      <el-button v-if="orderDetail.orderStatus==='20'"
                 type="primary" @click="showMessageDialog(false)">确认订单
      </el-button>
      <el-button v-else-if="orderDetail.orderStatus==='50'"
                 type="primary" @click="updateOrder('attend')">确认到场
      </el-button>
      <el-button v-else-if="orderDetail.orderStatus==='80'"
                 type="warning" @click="orderRefund">确认退款
      </el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="messageDialogVisible" :before-close="closeMessageDialog"
             style="margin-top: 37vh;"
             title="驳回 查看" width="1000px">
    <el-descriptions border direction="horizontal">
      <el-descriptions-item label="店家说明">
        <el-input v-model="orderDetail.shopMessage" placeholder="店家说明额外信息"/>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="closeMessageDialog">取消</el-button>
      <el-button v-if="isCancel" type="danger"
                 @click="updateOrder('cancel')">取消订单
      </el-button>
      <el-button v-else type="primary"
                 @click="updateOrder('confirm')">确认订单
      </el-button>
    </template>
  </el-dialog>

</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import qs from 'qs';
import axios from "axios";
import {ElMessage} from "element-plus";

const user = getUser();
const merchant = ref({
  shopList: [],
});
const orderQuery = ref({
  orderStatusList: [],
  shopId: null,
  orderNo: '',
  roomId: null,
  escortId: null,
  timeRange: [],
  startTime: null,
  endTime: null,
});
const orderList = ref([]);
const statusPageItem = ref([
  {label: "待处理", value: ["20", "80"]},
  {label: "待付款", value: ["30"]},
  {label: "待参加", value: ["50"]},
  {label: "其他", value: ["60", "70", "90"]},
]);
const orderStatusEnum = ref([]);
const orderDetail = ref({});
const dialogVisible = ref(false);
const messageDialogVisible = ref(false);
const isCancel = ref(false);

onMounted(() => {
  // merchant.value = merchant.value.value;
  getMerchant(merchant);
  resetOrderQuery();
  loadEnum(orderStatusEnum, 'OrderStatus');
});
const resetOrderQuery = () => {
  orderQuery.value.orderNo = '';
  orderQuery.value.roomId = null;
  orderQuery.value.escortId = null;
  orderQuery.value.timeRange = [];
  orderQuery.value.startTime = null;
  orderQuery.value.endTime = null;
}
const loadOrder = () => {
  // console.log(orderQuery);
  // let data = qs.stringify(orderQuery.value);
  if (orderQuery.value.shopId == null) {
    ElMessage.info("请选择店家");
    return;
  }
  if (orderQuery.value.orderStatusList.length < 1) {
    ElMessage.info("请选择订单状态");
    return;
  }
  orderQuery.value.startTime = orderQuery.value.timeRange[0];
  orderQuery.value.endTime = orderQuery.value.timeRange[1];
  let data = qs.stringify(orderQuery.value);
  axios.get(BASE_URL + 'v1/schedule/order/select?' + data)
      .then(res => {
        if (res.data.code === 2000) {
          orderList.value = res.data.data;
        } else {
          ElMessage.error(res.data.msg);
        }
      });
};
const resetSearch = () => {
  resetOrderQuery();
  loadOrder();
};
const statusFormatter = (row, column, cellValue, index) => {
  return cellValueFormatter(cellValue, orderStatusEnum);
}
const timeRangeFormatter = (row, column, cellValue, index) => {
  const start = row.startTime;
  const end = row.endTime;
  return `${start} - ${end}`;
}
const handleOrder = (row) => {
  orderDetail.value = row;
  dialogVisible.value = true;
}
const closeDialog = () => {
  dialogVisible.value = false;
  orderDetail.value = {};
}
const getOrderStatus = computed(() => {
  return cellValueFormatter(orderDetail.value.orderStatus, orderStatusEnum);
})
const showMessageDialog = (is) => {
  isCancel.value = is;
  messageDialogVisible.value = true;
}
const closeMessageDialog = () => {
  orderDetail.value.shopMessage = null;
  messageDialogVisible.value = false;
}
const updateOrder = (type) => {
  switch (type) {
    case 'cancel':
      if (confirm('是否取消订单？')) {
        orderDetail.value.orderStatus = '40';
      } else {
        return;
      }
      break;
    case 'confirm':
      if (confirm('是否确认订单？')) {
        orderDetail.value.orderStatus = '30';
      } else {
        return;
      }
      break;
    case 'attend':
      if (confirm('是否确认玩家已到场参加')) {
        orderDetail.value.orderStatus = '60';
      } else {
        return;
      }
  }
  console.log(orderDetail.value);
  axios.post(BASE_URL + 'v1/schedule/order/update', orderDetail.value)
      .then(res => {
        if (res.data.code === 2000) {
          ElMessage.success('已更新')
          closeMessageDialog();
          closeDialog();
          loadOrder();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
}
const orderRefund = () => {
  if (!confirm('是否确认退款？')) {
    return;
  }
  console.log(orderDetail.value.id);
  axios.post(BASE_URL + 'v1/schedule/order/refund',
      qs.stringify({id: orderDetail.value.id}))
      .then(res => {
        if (res.data.code === 2000) {
          ElMessage.success('已退款');
          closeDialog();
          loadOrder();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
}
</script>

<style scoped>

</style>